import React,{PureComponent} from 'react'
import {View,Button,SafeAreaView,Text,StyleSheet,TextInput,ScrollView,Dimensions,TouchableOpacity,Image,FlatList} from 'react-native'
import color from "../../../widget/color";
import {fetchGetRequest, fetchPostRequest} from "../../../api/NetworkTool";
import method from "../../../api/method";
import api from "../../../api/api";
import MinePayDetailCourseCell from '../../../widget/mine/MinePayDetailCourseCell'
import RefundOrderModal from '../../../widget/mine/RefundOrderModal'
import {NavigationActions} from "react-navigation";
import Tips from "react-native-root-tips";

import RefuesDetailAlertDialog from '../../../widget/dialog/RefuesDetailAlertDialog'


const {width, height} = Dimensions.get('window')


export default class MinePayDetailScene extends PureComponent{
    static navigationOptions = ({navigation}: any) => ({
        headerTintColor:'rgba(0,0,0,0.8)',
        title:'已付款',
        headerRight:<Text/>,
        headerLeft:<TouchableOpacity onPress={()=>{
            navigation.goBack()
        }}>
            <Image style={{marginLeft:12}} source={require('../../../../res/img/gobal_back.png')}/>
        </TouchableOpacity>
    });
    constructor(props){
        super(props)
        this.state = {
            info:{
                order:{},
                course:[],
                address:{},
            },
            showRefund: false,
            courses:[],
            totalPrice:0,
            isTuiKuan:false,
            showRefundDetail:false,
            refundData:[],
        }
    }
    componentDidMount() {
        const {orderId} = this.props.navigation.state.params

        let params = {
            orderId:orderId,
        }
        fetchGetRequest(api.getOrderDetail,method.get,params)
            .then(res=>{
                let tempArr = []
                res.course.forEach(info=>{

                    info.checked = false
                    tempArr.push(info)
                })

                this.setState({info:res,courses:tempArr})
            })
            .catch(err=>{})
    }
    render(){
        let disprice = this.state.info.order.discount
        let yingPrice = (this.state.info.order.amount - this.state.info.order.discount) > 0?(this.state.info.order.amount - this.state.info.order.discount):0

        let dis = (disprice) > 0?-disprice:0
        var type = '微信支付'
        if (this.state.info.order.clientType == 'wxpay'){
            type = '微信支付'
        } else {
            type = '支付宝支付'
        }
        var courseIds = ''
        let datalist = this.state.courses
        datalist.forEach(item=>{
            courseIds = courseIds + item.id + ','
        })
        return (
           <SafeAreaView style={{flex:1}}>
               <ScrollView>
                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,paddingTop:15,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginBottom:10}}>订单信息</Text>
                       <View style={{flexDirection:'row',alignItems:'center'}}>
                           <Text style={styles.text_show}>订单号:</Text>
                           <Text style={styles.text_data}>{this.state.info.order.order_sn}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>下单时间：</Text>
                           <Text style={styles.text_data}>{this.state.info.order.pay_time}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>订单状态：</Text>
                           <Text style={styles.text_data}>已付款</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>支付方式：</Text>
                           <Text style={styles.text_data}>{type}</Text>
                       </View>
                   </View>
                   <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>

                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>收货人信息</Text>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>收货人：</Text>
                           <Text style={styles.text_data}>{this.state.info.address.receiver}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={styles.text_show}>联系电话：</Text>
                           <Text style={styles.text_data}>{this.state.info.address.mobile}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={[styles.text_show,{marginTop:2}]}>具体地址：</Text>
                           <Text style={[styles.text_data,{width:(width - 100)}]}>{this.state.info.address.city_name + this.state.info.address.address}</Text>
                       </View>
                   </View>
                   <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>
                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:5,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>课程详情</Text>
                       <FlatList
                           style={{marginTop:5}}
                           data={this.state.courses}
                           renderItem={this.renderCell}
                           keyExtractor={this.keyExtractor}
                           ItemSeparatorComponent={()=><View style={{marginLeft:8,width:width-40,height:1,backgroundColor:'rgba(0,0,0,0.25)'}}/>}
                       />
                   </View>
                   <View style={{width:width,height:2,backgroundColor:'#F9F9F9'}}/>
                   <View style={{paddingLeft:12,paddingRight:12,paddingBottom:15,backgroundColor:'white'}}>
                       <Text style={{color:'#111111', fontSize:13, fontWeight:'bold',marginTop:15}}>结算信息</Text>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>订单金额</Text>
                           <View style={{flex:1}}/>
                           <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{this.state.info.order.amount}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>优惠金额</Text>
                           <View style={{flex:1}}/>
                           <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{dis}</Text>
                       </View>
                       <View style={{flexDirection:'row',alignItems:'center',marginTop:10}}>
                           <Text style={{color:'rgba(0,0,0,0.7)',fontSize:12}}>实付金额</Text>
                           <View style={{flex:1}}/>
                           <Text style={{color:'rgba(0,0,0,0.8)',fontSize:12,fontWeight:'700',marginRight:8}}>{this.state.info.order.price}</Text>
                       </View>
                   </View>
               </ScrollView>
               <RefundOrderModal
                   show={this.state.showRefund}
                   callbackStatus={(status)=>{
                       this.setState({
                           showRefund:status
                       })
                   }}
                   callbackRefund={()=>{
                        this.setState({isTuiKuan:true,showRefund:false})

                   }}

               />
               <RefuesDetailAlertDialog data={this.state.refundData} show={this.state.showRefundDetail} closeModal={(status)=>{
                   // let tempArr= []
                   // this.state.courses.forEach(info=>{
                   //     info.checked = false
                   //     tempArr.push(info)
                   // })
                   this.setState({showRefundDetail:status,isTuiKuan:false,
                       // courses:tempArr
                   })
               }} confirmPress={()=>{
                    let params = {
                       orderId:this.state.info.order.id,
                       courseId:'[' + courseIds + ']'
                   }
                   fetchPostRequest(api.studentRefund,method.post, params)
                       .then(res=>{
                           console.log('res',res)
                           this.setState({
                               isTuiKuan:false
                           })
                           this.props.navigation.goBack()
                       })
                       .catch(err=>{})
               }} cancelPress={()=>{
                   // let tempArr= []
                   // this.state.courses.forEach(info=>{
                   //     info.checked = false
                   //     tempArr.push(info)
                   // })
                   this.setState({
                       isTuiKuan:false,
                       // courses:tempArr
                   })
               }}/>
               {this.tuiKuanNext()}

           </SafeAreaView>
        )
    }

    tuiKuanNext(){
        if (this.state.isTuiKuan){
            return <View style={{flexDirection:'row',height:50,width:width,}}>
                <TouchableOpacity onPress={()=>{
                    let isSelect = false
                    var courseId = '['
                    this.state.courses.forEach(course=>{
                        if (course.checked){
                            isSelect = true
                            courseId += course.id + ','
                        }
                    })
                    if (isSelect){
                        this.setState({showRefundDetail:true})
                        let params = {
                            orderId:this.state.info.order.id,
                            courseId:courseId + ']'
                        }
                        fetchGetRequest(api.studentRefundCount,method.get,params)
                            .then(res=>{
                                console.log('res',res)
                                this.setState({refundData:res.reFund})
                            })
                            .catch(err=>{})
                    }else {
                        Tips.showInfo('请选择课程',{mask:true})
                    }
                }}
                                  style={{backgroundColor:'#dcdcdc',width:width/2,alignItems:'center',justifyContent:"center"}}>
                    <Text style={{color:'#666666',fontSize:16,fontWeight:'bold'}}>继续退款</Text>
                </TouchableOpacity>
                <TouchableOpacity onPress={()=>{
                    // let tempArr= []
                    // this.state.courses.forEach(info=>{
                    //     info.checked = false
                    //     tempArr.push(info)
                    // })
                    this.setState({
                        isTuiKuan:false,
                        // courses:tempArr
                    })
                }} style={{backgroundColor:'#DB3853',width:width/2,alignItems:'center',justifyContent:"center"}}>
                    <Text style={{color:'white',fontSize:16,fontWeight:'bold'}}>不退了</Text>
                </TouchableOpacity>
            </View>
        } else {
            return <View style={{flexDirection:'row',height:50,width:width,}}>
                <TouchableOpacity onPress={()=>{
                    this.setState({
                        showRefund:true
                    })
                }}
                                  style={{backgroundColor:'#dcdcdc',width:width,alignItems:'center',justifyContent:"center"}}>
                    <Text style={{color:'#666666',fontSize:16,fontWeight:'bold'}}>申请退款</Text>
                </TouchableOpacity>
            </View>
        }
    }
    calculateCountAndPrice() {
        let tempTotalPrice = 0
        let tempStatus = this.state.courses
        for (let j = 0; j < tempStatus.length; j++) {
            let item = tempStatus[j]
            if (item.checked) {
                tempTotalPrice += item.price
            }
        }
        this.setState({totalPrice: tempTotalPrice})
    }
    isShowRefuesSelect(course,index){
        if (this.state.isTuiKuan){
            return <TouchableOpacity onPress={()=>{
                let data = this.state.courses
                var course = data[index]
                course.checked = !course.checked
                this.calculateCountAndPrice()
                this.setState({courses:data})

            }}>
                {course.checked?<Image source={require('../../../../res/img/detail/detail_select.png')}/>: <Image source={require('../../../../res/img/detail/detail_un_select.png')}/>}
            </TouchableOpacity>
        } else {
            return <View/>
        }
    }
    renderCell = (item: any) => {
        let course = item.item
        let index = item.index
        let start_time = course.start_date.substr(5,5).replace('-','月')+'日'
        let end_time = course.end_date.substr(5,5).replace('-','月')+'日'
        let mas_ta = course.teacher[0]
        let tou_ta = course.teacher[1]
        let coupon = course.coupon
        return <View style={{marginLeft: 8, marginRight: 8}}>
            <View style={{flexDirection: 'row', backgroundColor: 'white', marginTop: 10,alignItems:'center'}}>
                <Text numberOfLines={1} style={styles.title}>{course.title}</Text>
            </View>
            <View style={{flexDirection: 'row', backgroundColor: 'white', marginTop: 10, alignItems: 'center',}}>
                <Image style={{width: 12, height: 12}} source={require('../../../../res/img/select/select_time.png')}/>
                <Text style={[styles.time, {marginLeft: 7}]}>{start_time+'到'+end_time+course.frequency+course.start_time+'-'+course.end_time}</Text>
                <View style={{flex:1}}/>
                {this.isShowRefuesSelect(course,index)}
            </View>
            <View style={{flexDirection: 'row', backgroundColor: 'white', marginTop: 8,marginBottom:10, alignItems: 'flex-end',}}>
                <View style={{flexDirection: 'row', alignItems: 'center',}}>
                    <Image style={{width: 28, height: 28, borderRadius: 14}}
                           source={{uri:mas_ta.image}}/>
                    <View style={{marginLeft: 10, justifyContent: 'center', height: 28}}>
                        <Text style={styles.teacher}>讲师</Text>
                        <Text style={styles.teacher_show}>{mas_ta.realname}</Text>
                    </View>
                </View>
                <View style={{flexDirection: 'row', alignItems: 'center', marginLeft: 30}}>
                    <Image style={{width: 28, height: 28, borderRadius: 14}}
                           source={{uri:tou_ta.image}}/>
                    <View style={{marginLeft: 10, justifyContent: 'center', height: 28}}>
                        <Text style={styles.teacher}>辅导</Text>
                        <Text style={styles.teacher_show}>{tou_ta.realname}</Text>
                    </View>
                </View>
                <View style={{flex:1}}/>
                {this.state.isTuiKuan?<View/>:<View>
                    <View>
                        {coupon.price?<View style={{flexDirection: 'row', alignItems: 'center'}}>
                            <Text style={{color:'#999999',fontSize:10}}>已优惠</Text>
                            <Image style={{width:4,height:5,marginTop:4, marginLeft:3}} source={require('../../../../res/img/order/order_bi.png')}/>
                            <Text style={{color:'#999999',fontSize:11,marginLeft:3}}>{coupon.price}</Text>
                        </View>:<View/>}
                        <View style={{flexDirection: 'row', alignItems: 'center'}}>
                            <View style={{flex:1}}/>
                            <Image style={{width: 7, height: 8, marginTop: 4}}
                                   source={require('../../../../res/img/select/select_price.png')}/>
                            <Text style={styles.price}>{course.price}</Text>
                        </View>
                    </View>
                </View>}
            </View>
        </View>
    }
    keyExtractor = (item: Object, index: number) => {
        return index + ''
    }
}
const styles = StyleSheet.create({

    text_show:{
        color:'rgba(0,0,0,0.5)',
        fontSize:12,
        fontWeight:'200',
        width:64,
    },
    text_data:{
        fontSize:13,
        color:'black',
        marginLeft:15,
        marginRight:12,
    },
    title_show_jie_e:{
        color:'rgba(0,0,0,0.7)',
        fontWeight:'bold',
        fontSize:12,
    },
    title_data_jie_e:{
        color:'rgba(0,0,0,0.8)',
        fontSize:18,
        fontWeight:'700',
    },
    title_view:{
        flexDirection:'row',
        backgroundColor:'white',
        alignItems:'center',
    },
    title:{
        fontWeight:'bold',
        color:'rgba(0,0,0,0.8)',
        fontSize:16,
        width:(width -90),
    },
    time:{
        fontSize:12,
        color:'#999999',
        fontWeight:'200',
    },
    teacher:{
        fontSize:9,
        color:'#333333',
    },
    teacher_show:{
        fontSize:9,
        color:'#999999',
        marginTop:4,
    },
    price:{
        color:'rgba(197, 50, 60, 1)',
        fontSize:16,
        fontWeight:'bold',
        marginLeft:5,
    }
})